<template>
  <div class="ele-body">
    <a-card class="left" :bordered="false">
      <a-tree :showLine="true" v-if="treeData.length" :tree-data="treeData" :defaultExpandAll="true" v-model:checkedKeys="checkedKeys" :checkable="true" :multiple="true"> </a-tree
    ></a-card>
    <a-card class="right" :bordered="false">
      <a-form :model="sousuos" :label-col="{ md: { span: 6 }, sm: { span: 24 } }" :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }">
        <a-row>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="商品类型:">
              <a-select v-model:value="chioseOption" style="width: 120px" :options="Option" @change="serachType"> </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <div class="type_list">
            <div class="type_item" v-for="(item, index) in r_middle" :key="item.id">
              <span>{{ item.rule_name }}:</span>
              <span :class="item.is_active ? 'active' : ''" @click="handleAll(index)">{{ item.allName }}</span>
              <span :class="subItem.is_active ? 'active' : ''" @click="getShuxing(subItem.attr_name, subIndex, index)" v-for="(subItem, subIndex) in item.rule_attr" :key="subItem.id">{{
                subItem.attr_name
              }}</span>
            </div>
          </div>
        </a-row>
        <a-row>
          <a-form-item label="名称">
            <a-input v-model:value="sousuos.product_name" />
          </a-form-item>
          <a-form-item label="SKU">
            <a-input v-model:value="sousuos.sku" />
          </a-form-item>
          <a-form-item label="ASIN">
            <a-input v-model:value="sousuos.asin" />
          </a-form-item>
          <a-form-item label="FUSKU">
            <a-input v-model:value="sousuos.fnsku" />
          </a-form-item>
          <a-button style="background:#1ab394; margin-left:10px;" shape="round" :size="middle" @click="reload">
            <span style="color:#fff;" class="iconfont icon-sousuo">搜索</span>
          </a-button>
        </a-row>
      </a-form>
      <!-- 表格 -->
      <ele-pro-table
        ref="table"
        row-key="id"
        :datasource="cateLists"
        :columns="columns"
        :where="sousuos"
      >
        <template #toolbar>
          <a-space>
            <a-button type="primary" @click="openAddCate()">
              <template #icon>
                <plus-outlined />
              </template>
              <span>添加</span>
            </a-button>
          </a-space>
        </template>

        <template #operation="{ record }">
          <div class="editable-row-operations">
            <span> <a @click="() => editRowIndex(record)">编辑</a>&nbsp; </span>
            <span> <a @click="delRowIndex(record)">删除</a>&nbsp; </span>
          </div>
        </template>
        <template #expandedRowRender="{record}">
          <a-table :columns="innerColums" :data-source="record.attrs" :pagination="false" row-key="id">
            <template #operation="{ record }">
              <div class="editable-row-operations">
                <span> <a @click="() => huoyuanRowIndex(record)">添加</a>&nbsp; </span>
                <span> <a @click="() => seeHuoyuanRowIndex(record)">货源</a>&nbsp; </span>
                <span> <a @click="() => seeHuoyuanEdit(record)">编辑</a>&nbsp; </span>
                <span> <a @click="() => seeHuoyuanDelete(record)">删除</a>&nbsp; </span>
              </div>
            </template>
            <template #label_data="{ text }">
              <a-tag v-for="item in text" :key="item.id">{{ item.label_name }}</a-tag>
            </template>
          </a-table>
        </template>
      </ele-pro-table>
    </a-card>

    <!-- 货源列表的弹出框 -->
    <a-modal v-model:visible="huoyuanListVisible" title="货源列表" @ok="handlListeOk" width="70%">
      <template #footer>
        <a-button key="back" @click="handlListeOk">确定</a-button>
        <a-button key="submit" type="primary" @click="huoyuanHandleCancel">取消</a-button>
      </template>
      <a-table :columns="huoyuanListcolumns" :data-source="huoyuanListdata" rowKey="id">
        <template #operation="{ record }">
          <div class="editable-row-operations">
            <span> <a @click="() => huoyuanDetele(record)">删除</a>&nbsp; </span>
          </div>
        </template>
      </a-table>
    </a-modal>
    <!-- sku商品编辑 -->
    <a-modal v-model:visible="huoyuanEditVisible" title="SKU编辑" @ok="handleSkuEditeOk" width="70%">
      <template #footer>
        <a-button key="back" @click="handleSkuEditeOk">确定</a-button>
        <a-button key="submit" type="primary" @click="skuHandleCancel">取消</a-button>
      </template>
      <a-form :model="skuEditInfo" :rules="skuEditInfoRules" ref="skuEditInfoRef" class="skuEdit">
        <a-form-item label="商品规格">
          <span>{{ skuEditInfo.detail_lang }}</span>
        </a-form-item>
        <a-form-item label="图片">
          <a-upload name="file" list-type="picture-card picture" :show-upload-list="false" class="pic" :custom-request="data => onFileUpload(data)">
            <div>
              <img style="height:36px; width:36px;" v-if="imgUrl1 != null" :src="imgUrl1" alt="" />
            </div>
          </a-upload>
        </a-form-item>
        <!-- 条形图片 -->
        <a-form-item label="条形图片">
          <a-upload name="file" list-type="picture-card picture" :show-upload-list="false" class="pic" :custom-request="data => onFileUpload2(data)">
            <div>
              <img style="height:36px; width:36px;" v-if="imgUrl2 != null" :src="imgUrl2" alt="" />
            </div>
          </a-upload>
        </a-form-item>
        <!-- 商品编号 -->
        <a-form-item label="商品编号" name="bar_code">
          <a-input v-model:value="skuEditInfo.bar_code" style="width: 200px;" />
        </a-form-item>
        <a-form-item label="序列号类型" name="type_code">
          <a-input v-model:value="skuEditInfo.type_code" style="width: 200px;" placeholder="请输入序列号类型" />
        </a-form-item>
        <!-- SKU -->
        <a-form-item label="SKU" name="sku_code">
          <a-input style="width: 200px;" v-model:value="skuEditInfo.sku_code" />
        </a-form-item>
        <!-- ASIN -->
        <a-form-item label="ASIN" name="asin_code">
          <a-input style="width: 200px;" v-model:value="skuEditInfo.asin_code" />
        </a-form-item>
        <!-- FNSKU -->
        <a-form-item label="FNSKU" name="fnsku_code">
          <a-input style="width: 200px;" v-model:value="skuEditInfo.fnsku_code" />
        </a-form-item>

        <a-form-item label="是否小商品">
          <a-radio-group v-model:value="skuEditInfo.is_samll">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="是否补货">
          <a-radio-group v-model:value="skuEditInfo.is_supply">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="标签">
          <a-select v-model:value="skuEditInfo.label_id" mode="multiple" :options="optionsLabel" @change="handleChange" style="width: 400px;"> </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import qs from 'qs'
import { createVNode } from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
export default {
  data() {
    return {
      // sku商品编辑弹框
      huoyuanEditVisible: false,
      huoyuanCaozuoRow: {},
      huoyuanListdata: [],
      huoyuanListcolumns: [
        {
          title: 'ID',
          dataIndex: 'id',
          width: 90
        },
        {
          title: '商城SKU信息',
          dataIndex: 'shangc_lang'
        },
        {
          title: '商城SKU唯一码',
          dataIndex: 'shangc_unique'
        },
        {
          title: '商城商品ID',
          dataIndex: 'shangc_id'
        },
        {
          title: '商城商品名称',
          dataIndex: 'shangc_name'
        },
        {
          title: '仓库SKU信息',
          dataIndex: 'cangku_lang'
        },
        {
          title: '仓库SKU唯一码',
          dataIndex: 'cangku_unique'
        },
        {
          title: '仓库产品ID',
          dataIndex: 'cangku_id'
        },
        {
          title: '仓库商品名称',
          dataIndex: 'cangku_name'
        },
        {
          title: '操作',
          key: 'operation',
          slots: { customRender: 'operation' }
        }
      ],
      // 货源的弹出层
      huoyuanListVisible: false,
      // 左侧树形结构的数据
      treeData: [],
      // 查询数据
      queryInfo: {},
      // 商品分类的选择项
      checkedKeys: [],
      // 右边上面的已经选择
      chioseOption: [],
      // 选择列表
      Option: [],
      // 四个搜索
      sousuos: {
        product_name: '',
        sku: '',
        asin: '',
        fnsku: ''
      },
      // 右侧中间属性的数据
      r_middle: [],
      // 表格数据
      cateLists: [],
      // 表格的渲染
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          width: 90
        },
        {
          title: '商品名称',
          dataIndex: 'product_name'
        },
        {
          title: '品牌',
          dataIndex: 'pinpaiName'
        },

        {
          title: '货源个数',
          dataIndex: 'source_count'
        },
        {
          title: '库存量',
          dataIndex: 'stock'
        },
        {
          title: '状态',
          dataIndex: 'status'
        },
        {
          title: '操作',
          key: 'operation',
          slots: { customRender: 'operation' }
        }
      ],
      // 子表的colums  数据
      innerColums: [
        {
          title: 'ID',
          dataIndex: 'id'
        },
        {
          title: '规格信息',
          dataIndex: 'detail_lang'
        },
        {
          title: 'ASIN',
          dataIndex: 'asin_code'
        },
        {
          title: 'SKU',
          dataIndex: 'sku_code'
        },
        {
          title: 'FNSKU',
          dataIndex: 'fnsku_code'
        },
        {
          title: '货源',
          dataIndex: 'source_count'
        },
        {
          title: '库存',
          dataIndex: 'stock'
        },
        {
          title: '标签',
          dataIndex: 'label_data',
          width: 120,
          slots: {
            customRender: 'label_data'
          }
        },
        {
          title: '操作',
          key: 'operation',
          slots: { customRender: 'operation' }
        }
      ],
      // sku编辑数据
      skuEditInfo: {},
      skuEditInfoRules: {
        bar_code: [
          {
            required: true,
            message: '请选择商品分类',
            trigger: 'change'
          }
        ],
        type_code: [
          {
            required: true,
            message: '请选择商品分类',
            trigger: 'change'
          }
        ],
        sku_code: [
          {
            required: true,
            message: '请选择商品分类',
            trigger: 'change'
          }
        ],
        asin_code: [
          {
            required: true,
            message: '请选择商品分类',
            trigger: 'change'
          }
        ],
        fnsku_code: [
          {
            required: true,
            message: '请选择商品分类',
            trigger: 'change'
          }
        ],
        is_samll: [
          {
            required: true,
            message: '请选择商品分类',
            trigger: 'change'
          }
        ],
        is_supply: [
          {
            required: true,
            message: '请选择商品分类',
            trigger: 'change'
          }
        ]
      },
      imgUrl1: null,
      imgUrl2: null,
      // 子表格编辑标签
      optionsLabel: []
    }
  },
  created() {
    this.getTypeLists()
    this.getSelectDown()
    this.listsInit()
  },
  watch: {
    checkedKeys() {
      this.listChoice()
    },
    queryInfo() {
      this.listsInit()
    }
  },
  methods: {
    // 刷新表格
    /* 刷新表格 */
    // reload() {
    //   this.$refs.table.reload()
    // },
    // 初始化列表
    async listsInit() {
      const res = await this.$http.get('/product', { params: this.queryInfo })
      console.log(res.data.data)
      res.data.data.list.forEach(item => {
        if (!(item.product_brand == null)) {
          item.pinpaiName = item.product_brand.brand_name
        }
        if (!(item.product_type == null)) {
          item.pinpaiType = item.product_type.type_name
        }
        if (item.status == 1) {
          item.status = '上架'
        } else {
          item.status = '下架'
        }
        // 处理子表的数据  detail_lang的数据
        item.attrs.forEach(ele => {
          ele.detail_lang = ele.detail_lang.join()
        })
      })

      this.cateLists = res.data.data.list
    },
    // 获取右侧中间属性的数据
    async getSelectDown() {
      const res = await this.$http.get('/product/rule_list')
      console.log(res.data.data)
      res.data.data.forEach(item => {
        item.allName = '全部'
        item.is_active = false
        item.rule_attr.forEach(ele => {
          ele.is_active = false
        })
      })
      this.r_middle = res.data.data
      this.queryInfo.attr_name = []
    },
    // 处理属性的点击事件一列属性
    handleAll(index) {
      this.r_middle[index].is_active = !this.r_middle[index].is_active
      let arr = []
      if (this.r_middle[index].is_active == true) {
        this.r_middle[index].rule_attr.forEach(item => {
          item.is_active = true
          arr.push(item.attr_name)
        })
        arr.forEach(item => {
          this.queryInfo.attr_name.push(item)
        })
        this.queryInfo.attr_name = Array.from(new Set(this.queryInfo.attr_name))
        console.log(this.queryInfo)
      } else {
        this.r_middle[index].rule_attr.forEach(item => {
          item.is_active = false
          arr.push(item.attr_name)
        })
        arr.forEach(item => {
          let flog = this.queryInfo.attr_name.indexOf(item)
          this.queryInfo.attr_name.splice(flog, 1)
          console.log(index)
        })
      }

      this.listsInit()
    },
    // 初始化左侧树形结构
    async getTypeLists() {
      const res = await this.$http.get('/product/category?lang=zh&is_new=1')
      console.log(res.data.data.list)
      this.treeData = [
        {
          title: '全部商品',
          key: -1,
          children: res.data.data.list
        }
      ]
    },
    // 获取左侧的树形组件的回调
    async listChoice() {
      const res = await this.$http.post('/product/type_list', qs.stringify({ category_id: this.checkedKeys }))
      let arr = []
      console.log(res)
      res.data.data.forEach(element => {
        arr.push({ label: element.type_name, value: element.id })
      })
      this.Option = arr
      this.queryInfo.category_id = this.checkedKeys
      this.listsInit()
    },
    // 下拉选择的回调
    async serachType() {
      console.log(this.chioseOption)
      const res = await this.$http.get('/product/rule_list?type_id=' + this.chioseOption)
      console.log(res.data.data)
      res.data.data.forEach(item => {
        item.allName = '全部'
        item.is_active = false
        item.rule_attr.forEach(ele => {
          ele.is_active = false
        })
      })
      this.r_middle = res.data.data
      this.queryInfo.attr_id = []
    },
    // 点击属性单个属性
    async getShuxing(name, childIndex, index) {
      this.r_middle[index].rule_attr[childIndex].is_active = !this.r_middle[index].rule_attr[childIndex].is_active
      if (this.r_middle[index].rule_attr[childIndex].is_active) {
        this.queryInfo.attr_name.push(name)
        this.queryInfo.attr_name = Array.from(new Set(this.queryInfo.attr_name))
      } else {
        let flog = this.queryInfo.attr_name.indexOf(name)
        this.queryInfo.attr_name.splice(flog, 1)
      }
      this.listsInit()
    },

    // 商品搜索
    async reload() {
      this.queryInfo.product_name = this.sousuos.product_name
      this.queryInfo.sku = this.sousuos.sku
      this.queryInfo.asin = this.sousuos.asin
      this.queryInfo.fnsku = this.sousuos.fnsku
      this.listsInit()
      this.$refs.table.reload()
      this.$message.success('搜索成功！')
    },
    // 编辑
    editRowIndex(row) {
      console.log(row)
      this.$router.push({ path: '/goods/list/edit', query: { id: row.id } })
    },
    // 删除
    delRowIndex(row) {
      this.$confirm({
        title: '确定删除？',
        content: '删除后将无法恢复',
        okText: '确定',
        cancelText: '取消',
        icon: createVNode(ExclamationCircleOutlined),
        onOk: async () => {
          const { data: res } = await this.$http.delete('/product/' + row.id)
          if (res.code != 0) this.$message.warning('删除失败')
          this.$message.success('删除成功')
          this.listsInit()
        },
        onCancel: () => {
          this.$message.info('取消操作')
        }
      })
    },
    // 添加商品
    openAddCate() {
      this.$router.push('/goods/list/add')
    },
    // 添加货源
    huoyuanRowIndex(row) {
      this.$router.push({ path: '/goods/list/huoyuan', query: { id: row.id, unique: row.unique } })
    },
    // 货源列表
    async seeHuoyuanRowIndex(row) {
      console.log(row)
      this.huoyuanCaozuoRow = row
      const res = await this.$http.get('/product/has_depot_list', {
        params: {
          sku_unique: row.unique,
          product_id: row.id
        }
      })
      console.log(res.data.data.list)
      res.data.data.list.forEach(item => {
        if (item.product != null) {
          item.shangc_name = item.product.product_name
        } else {
          item.shangc_name = ''
        }
        if (item.depot_product != null) {
          item.cangku_name = item.depot_product.product_name
        } else {
          item.cangku_name = ''
        }

        item.shangc_lang = item.sku_product.detail_lang.join(',')
        if (item.depot_sku_product != null) {
          item.cangku_lang = item.depot_sku_product.detail_lang.join(',')
        } else {
          item.cangku_lang = ''
        }
        if (item.sku_product != null) {
          item.shangc_unique = item.sku_product.unique
        } else {
          item.shangc_unique = ''
        }
        if (item.depot_sku_product != null) {
          item.cangku_unique = item.depot_sku_product.unique
        } else {
          item.cangku_unique = ''
        }
        // item.cangku_unique = item.depot_sku_product.unique
        item.shangc_id = item.sku_product.id
        if (item.depot_sku_product != null) {
          item.cangku_id = item.depot_sku_product.id
        } else {
          item.cangku_id = ''
        }
        // item.cangku_id = item.depot_sku_product.id
      })
      this.huoyuanListdata = res.data.data.list
      this.huoyuanListVisible = true
    },
    huoyuanHandleCancel() {
      this.huoyuanListVisible = false
    },
    handlListeOk() {
      this.huoyuanListVisible = false
    },
    async huoyuanDetele(row) {
      const { data: res } = await this.$http.post(
        '/product/del_depot',
        qs.stringify({
          id: row.id
        })
      )
      console.log(res)
      if (res.code != 0) return this.$message.warning('删除失败')
      this.$message.success('删除成功')
      const ress = await this.$http.get('/product/has_depot_list', {
        params: {
          sku_unique: this.huoyuanCaozuoRow.unique,
          product_id: this.huoyuanCaozuoRow.id
        }
      })
      console.log(ress)
      ress.data.data.list.forEach(item => {
        if (item.product != null) {
          item.shangc_name = item.product.product_name
        } else {
          item.shangc_name = ''
        }
        if (item.depot_product != null) {
          item.cangku_name = item.depot_product.product_name
        } else {
          item.cangku_name = ''
        }

        item.shangc_lang = item.sku_product.detail_lang.join(',')
        item.cangku_lang = item.depot_sku_product.detail_lang.join(',')
        item.shangc_unique = item.sku_product.unique
        item.cangku_unique = item.depot_sku_product.unique
        item.shangc_id = item.sku_product.id
        item.cangku_id = item.depot_sku_product.id
      })
      this.huoyuanListdata = ress.data.data.list
    },
    // 子表格编辑获取商品标签
    async getLabelList() {
      const res = await this.$http.get('/product/label')

      let arr = res.data.data.list
      let newArr = []
      arr.forEach(item => {
        newArr.push({ label: item.label_name, value: item.id })
      })
      this.optionsLabel = newArr
      console.log(this.optionsLabel)
    },
    // 子表编辑
    async seeHuoyuanEdit(row) {
      const { data: res } = await this.$http.get('/product/sku/' + row.unique)

      res.data.detail_lang = res.data.detail_lang.join()
      res.data.label_id = res.data.label_id.split(',')
      let arr = []
      res.data.label_id.forEach(item => {
        arr.push(parseInt(item))
      })
      res.data.label_id = arr
      console.log(res.data)
      this.skuEditInfo = res.data
      // 处理图片
      this.imgUrl1 = res.data.pic
      this.imgUrl2 = res.data.image_fnsku
      this.getLabelList()
      this.huoyuanEditVisible = true
    },
    // 选择标签的回调
    handleChange() {
      console.log(this.skuEditInfo)
    },
    // 子表格的删除
    async seeHuoyuanDelete(row) {
      const { data: res } = await this.$http.delete('/product/sku/' + row.unique)
      console.log(res)
      if (res.code != 0) return this.$message.warning('删除失败')
      this.$message.success('删除成功')
      this.listsInit()
    },
    // sku编辑确定的回调
    async handleSkuEditeOk() {
      console.log(this.skuEditInfo)

      let obj = {
        unique: this.skuEditInfo.unique,
        pic: this.skuEditInfo.pic.slice(32),
        image_fnsku: this.skuEditInfo.image_fnsku.slice(32),
        label_id: this.skuEditInfo.label_id.join(),
        bar_code: this.skuEditInfo.bar_code,
        sku_code: this.skuEditInfo.sku_code,
        fnsku_code: this.skuEditInfo.fnsku_code,
        asin_code: this.skuEditInfo.asin_code,
        type_code: this.skuEditInfo.type_code,
        is_samll: this.skuEditInfo.is_samll,
        is_supply: this.skuEditInfo.is_supply
      }

      const { data: res } = await this.$http.post('/product/sku/edit', qs.stringify(obj))
      console.log(res)
      if (res.code != 0) return this.$message.warning('编辑失败')
      this.$message.success('编辑成功')
      this.huoyuanEditVisible = false
      this.listsInit()
    },
    // sku商品编辑取消操作
    skuHandleCancel() {
      this.huoyuanEditVisible = false
    },
    // 上传图片
    async onFileUpload(file) {
      // this.loading[type] = true;
      console.log(file)
      const formData = new FormData()
      formData.append('file', file.file)
      const res = await this.$http.post('/common/upload', formData)
      console.log(res.data.data)
      this.imgUrl1 = process.env.VUE_APP_API_BASE_URL + '/uploads/' + res.data.data
      this.skuEditInfo.pic = process.env.VUE_APP_API_BASE_URL + '/uploads/' + res.data.data
    },
    async onFileUpload2(file) {
      // this.loading[type] = true;
      console.log(file)
      const formData = new FormData()
      formData.append('file', file.file)
      const res = await this.$http.post('/common/upload', formData)
      console.log(res.data.data)
      this.imgUrl2 = process.env.VUE_APP_API_BASE_URL + '/uploads/' + res.data.data
      this.skuEditInfo.image_fnsku = process.env.VUE_APP_API_BASE_URL + '/uploads/' + res.data.data
    }
  }
}
</script>

<style lang="less" scoped>
.ele-body {
  display: flex;
  height: 100%;
  .left {
    width: 15%;
    margin-right: 1%;
    height: 100%;
  }
  .right {
    width: 84%;
    height: 100%;
  }
  .type_list {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px;
    border-top: 1px solid #47474757;
    border-right: 1px solid #47474757;
    .type_item {
      height: 40px;
      border-bottom: 1px dashed #9b95958a;
      span {
        font-size: 16px;
        line-height: 40px;
        color: #000;
        margin-right: 20px;
        cursor: pointer;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
          'Noto Color Emoji';
      }
      span:first-child {
        color: #00000085;
        width: 80px;
        margin-right: 0px;
        display: inline-block;
        white-space: nowrap;
      }
      span:nth-child(2) {
        font-weight: 600;
        color: #2222228a;
        letter-spacing: 2px;
      }
    }
  }
}
.active {
  color: red !important;
  font-weight: 600 !important;
}
.skuEdit {
  /deep/ .ant-form-item-control {
    width: 40% !important;
  }
  /deep/ .ant-upload.ant-upload-select-picture-card {
    height: 40px !important;
    width: 40px !important;
  }
  /deep/ .ant-form-horizontal .ant-form-item-label {
    width: 100px !important;
  }

  /deep/ .ant-form-item {
    .ant-form-horizontal .ant-form-item-label {
      width: 100px !important;
    }
  }
}

.ant-modal-body {
  .skuEdit {
    /deep/ .ant-form-item-control {
      width: 40% !important;
    }
    /deep/ .ant-upload.ant-upload-select-picture-card {
      height: 40px !important;
      width: 40px !important;
    }
    /deep/ .ant-form-horizontal .ant-form-item-label {
      width: 100px !important;
    }

    /deep/ .ant-form-item {
      .ant-form-item-label {
        width: 100px !important;
      }
    }
  }
}
</style>
